<template>
  <el-dialog v-model="localDialogFlag" title="检查数据" width="60%">
    <el-table :data="inspectionValues" style="width: 100%" border class="custom-table">
      <el-table-column label="数据组" prop="inspectionGroupName"></el-table-column>
      <el-table-column label="属性" prop="attribute"></el-table-column>
      <el-table-column label="值">
        <template #default="{ row }">
          <span>{{ row.groupValue }}{{ row.perUnit }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from "vue";

// 定义父组件传递的 props 和事件
const props = defineProps({
  dialogFlag: {
    type: Boolean,
    default: false
  },
  inspectionValues: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(["update:dialogFlag"]);

// 创建一个本地变量来管理对话框显示状态
const localDialogFlag = ref(props.dialogFlag);

// 监听 dialogFlag 的变化，保持同步
watch(
  () => props.dialogFlag,
  newVal => {
    localDialogFlag.value = newVal;
  }
);

// 当对话框关闭时，更新父组件的 dialogFlag
watch(localDialogFlag, newVal => {
  emit("update:dialogFlag", newVal);
});
</script>

<style scoped lang="scss">
.custom-table :deep(.el-table__header-wrapper thead tr th) {
  color: #000000;
  text-align: center;
  background-color: #fafafa;
}
.custom-table :deep(.el-table__body-wrapper tbody tr td) {
  text-align: center; /* 单元格内容居中 */
}
.el-button {
  border-radius: 6px;
}
:deep(.my-label) {
  width: 100px !important;
}
</style>
